<template>
    <div class="task-item-container">
        <div class="top">
            <div class="flex-box">
                <div class="need-answer" v-if="data.compulsory">必答</div>
                <div class="task-name">
                    <Ellipsis :content="data?.name || ''"></Ellipsis>
                </div>
            </div>
            <div class="flex-box" v-if="!isPreview">
                <div class="have-answer" v-if="data.isDone">已提交</div>
                <div class="remain-times" v-if="allTimes != -1">{{props.isBuyPerson ? '剩余提交次数' : '有效提交次数'}}：<span>{{remainingTimes}}</span><span>次</span></div>
            </div>
        </div>
        <div class="bottom">
            <div class="task-desc">
                <Ellipsis
                    :content="data?.context || ''"
                    :rows="2"
                    :line-height="21"
                    effect="light"></Ellipsis>
            </div>
            <div class="file-answer flex-between">
                <div class="file-wrap">
                    <template v-if="data?.homeworkMaterialList && data?.homeworkMaterialList?.length">
                        <FileItem
                            v-for="(item, index) in data.homeworkMaterialList"
                            :key="index"
                            :data="item || {}"
                            :is-buy-person="isBuyPerson"
                            :is-creater="isCreater"
                            @obtain-course="emit('obtain-course')"/>
                    </template>
                </div>
                <div v-if="!isPreview">
                    <el-button type="primary" link class="see-task" v-if="data.isDone" @click="handleTask('view')">查看作业</el-button>
                    <el-button v-if="allTimes == -1 || remainingTimes > 0" class="answer-task" @click="handleTask('answer')">{{data.isDone ? '重新作答' : '去作答'}}<i class="iconfont icon-lijibaomingjiantou"></i></el-button>
                </div>
                <!-- 预览状态下一直显示去报名按钮 点击给统一的不能操作的提示 -->
                <div v-else>
                    <el-button  class="answer-task" @click="handleTask('answer')">去作答<i class="iconfont icon-lijibaomingjiantou"></i></el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import Ellipsis from '@/components/ellipsis.vue';
import FileItem from './file-item.vue';
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const emit = defineEmits(['obtain-course']);

const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    },
    isCreater: { // 是否是创建者
        type: Boolean,
        default: false
    },
    isBuyPerson: { // 是否是购买者
        type: Boolean,
        default: false
    },
    isPreview: { // 是否是预览状态
        type: Boolean,
        default: false 
    }
})

// 总的提交次数
const allTimes = computed(() => {
    return props.data?.times || 0;
})

// 有效剩余提交次数
const remainingTimes = computed(() => {
    let allTimes = props.data?.times || 0;
    let answerTimes = props.data?.answerTimes || 0;
    return allTimes - answerTimes
})

// 操作作业的类型 view 查看 answer 答题
const taskType = ref('');

// 编辑作业在当前页面打开（为了保存之后更新数据），查看作业在新窗口打开 预览情况下不能答题
function handleTask (type) {
    taskType.value = type;
    if (props.isPreview) {
        G_dispatchEvent('toast', { message: '预览状态下不可操作', type: 'error'});
        return
    }
    validPermission((type) => {
        if (taskType.value === 'answer') {
            G_go({ 
                name: route.name === 'strainDetail' ? 'strainTaskAnswer' : 'taskAnswer', 
                params: {
                    moocId: route.params.moocId || ''
                },
                query: {
                    taskId: props.data.homeWorkId || ''
                }
            }, false);
        } else {
            G_go({ 
                name: route.name === 'strainDetail' ? 'strainTaskDetail' : 'taskDetail', 
                params: {
                    moocId: route.params.moocId || ''
                },
                query: {
                    taskId: props.data.homeWorkId || ''
                }
            }, true);
        }
    });
}

// 校验是否有权限查看/填写作业
function validPermission (nextFn) {
    if (props.isBuyPerson) {
        nextFn && nextFn();
    } else {
        emit('obtain-course');
    }
}
</script>

<style lang="scss" scoped>
.task-item-container {
    margin-top: 20px;
    color: var(--srt-main-text-color);
    font-family: MicrosoftYaHei;
    .top {
        height: 46px;
        background: #F7F9FA;
        border-radius: 4px 4px 0px 0px;
        border: 1px solid #E0E2E4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        .need-answer {
            width: 36px;
            height: 18px;
            font-size: 12px;
            color: #FF4719;
            background: #FFE4DD;
            border-radius: 10px;
            line-height: 16px;
            text-align: center;
            border: 1px solid #FF4719;
            margin-right: 10px;
        }
        .task-name {
            font-size: 16px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: bold;
            line-height: 16px;
            max-width: 766px;
        }
        .flex-box {
            display: flex;
            align-items: center;
        }
        .have-answer {
            &:before {
                content: '\e6ab';
                font-family: 'iconfont';
                font-size: 14px;
                margin-right: 6px;
            }
            font-size: 14px;
            color: #00B042;
            margin-right: 14px;
        }
        .remain-times {
            font-size: 14px;
            color: var(--srt-color-gray);
            span:nth-child(1) {
                color: #47698C;
            }
            span:nth-child(2) {
                color: var(--srt-main-text-color);
            }
        }
    }
    .bottom {
        border-radius: 0px 0px 4px 4px;
        border: 1px solid #E0E2E4;
        padding: 11px 0 14px 20px;
        margin-top: -1px;
        .task-desc {
            padding-right: 20px;
            font-size: 14px;
            line-height: 21px;
        }
        .flex-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .file-answer {
            margin-top: 17px;
        }
        .see-task {
            height: 27px;
            color: var(--srt-main-active-text-color);
            padding: 0;
            margin: 0 20px 0 0;
            font-family: MicrosoftYaHei;
        }
        .answer-task {
            width: 94px;
            height: 27px;
            color: var(--srt-main-active-text-color);
            background: #E7F1FF;
            border-radius: 100px 0px 0px 100px;
            padding: 0 8px 0px 14px;
            margin: 0 0 0 -6px;
            border: none;
            font-family: MicrosoftYaHei;
        }
    }
}
</style>